<template>
	<view class="bodyView" :data-theme="dataTheme">
		<view class="mask" v-if="showCart" @click="showCart=false"></view>
		<view :class="{mainIndex:true,skew:showPop}">
			<navPhoneBar></navPhoneBar>
			<view class="swiper" :style="`transform:translateX(calc(${1-activeMenuIndex} * 100vw));`">
				<view class="swiper-item">
					<headrBar class="heardbar"></headrBar>
					<homeMain style="flex: 1;"></homeMain>
				</view>
				<view class="swiper-item">
					<producs></producs>
				</view>
				<view class="swiper-item">
					<personal></personal>
				</view>
			</view>
			<bottomBar :class="{BottomBar:true,hide:showPop}"></bottomBar>
			<order v-model="showCart" :class="{BottomCart:true}"></order>

		</view>
		<uni-popup ref="popup" type="bottom" @change="handlePopup" border-radius="40px 40px 0 0">
			<producDetail v-model="currentProId"></producDetail>
		</uni-popup>
		
		<toastBox v-model="showToast" :title="toastData.title" :detail="toastData.detail"></toastBox>
	</view>
</template>

<script setup>
	import {searchAddress} from '@/hooks/mapHooks.js'
	const{test,getCityList}=searchAddress()
	import {
		nextTick,
		onBeforeMount,
		onMounted,
		onUnmounted
	} from 'vue';
	import headrBar from './components/homeHeard.vue'
	import homeMain from './components/homeMain.vue'
	import bottomBar from '@/components/bottomBar.vue'
	import producDetail from '@/components/producDetail.vue'
	import order from '@/pages/order/index.vue'
	import producs from '@/pages/produc/index.vue'
	import personal from '@/pages/personal/index.vue'
	import useSystemStore from '@/store/modules/system'
	import toastBox from '@/components/toastBox.vue'
	const systemStore = useSystemStore()
	const {
		dataTheme,
		activeMenuIndex,
		userInfo
	} = storeToRefs(systemStore);
	let title = ref('Hello')
	//popup组件
	let popup = ref(null)
	//popup是否显示
	let showPop = ref(false)
	let currentProId = ref(0)
	//是否显示购物车
	let showCart=ref(false)
	//toast弹框参数
	let showToast=ref(false)
	let toastData=ref({
		title:'',
		detail:''
	})




	onBackPress(() => {
		// 处理侧滑返回逻辑
		currentProId.value = 0
		popup.value&&popup.value.close() 
		//阻止默认行为
		return true
	})
	onUnload(() => {
		// 处理侧滑返回逻辑
		currentProId.value = 0
		popup.value&&popup.value.close()
		 
		//阻止默认行为
		return false
	})
	//处理popup事件
	let handlePopup = (e) => { 
		showPop.value = e.show
	}
	onBeforeMount(()=>{
		
		let _userInfo = uni.getStorageSync("userInfo");
		console.log(34433,_userInfo);
		if(!_userInfo)
		{
			uni.reLaunch({
				url:'/pages/login/index'
			})
			return
		} 
		else
			userInfo.value=_userInfo
			
		if(!userInfo.value)
		{
			uni.reLaunch({
				url:'/pages/login/index'
			})
			return
		} 
		else if(!userInfo.value.phone)
		{
			uni.reLaunch({
				url:'/pages/login/index'
			})
			return
		}
			
	})
	onMounted(() => {
		 
		getCityList()
		
		uni.$on('showProDetail', (id) => {
			if (id) {
				currentProId.value = id
				showPop.value =true
				setTimeout(()=>{
					popup.value.open()
				},200)
				 
			} else { 
				popup.value.close()
				setTimeout(()=>{
					currentProId.value = 0
				},300)
			}
		})
		uni.$on('showToast',(data)=>{
			toastData.value=data
			showToast.value=true
		})
	})
	onUnmounted(() => {
		uni.$off('showProDetail')
		uni.$off('showToast')
	})
</script>

<style lang="scss" scoped>
	.bodyView {
		box-sizing: border-box;
		.mask{
			height: 100vh;
			width: 100vw;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1001;
			// background: rgba(255, 255, 255, 0.1);
			// -webkit-backdrop-filter: blur(20px);
			background: linear-gradient(to top right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
	 
			background-size: 33.3vw 33.3vw;
			backdrop-filter: blur(20px);
		}
	}

	.mainIndex {
		overflow-x: hidden;
		width: 100vw;
		height: 100vh;
		transition: all 0.6s cubic-bezier(0.6, -0.28, 0.735, 0.045);

		&.skew {
			border-radius: 40px 40px 0 0;
			transform: scale3d(1, 0.97, 1);
			transform-origin: bottom;
		}

		@include flex-teng(column);

		@include useTheme {
			background-color: getValue("bgColor");
			color: getValue("textColor");
		}

		.swiper {
			width: 300vw;
			flex: 1;
			@include flex-teng(row, flex-start);
			transition: transform 0.9s cubic-bezier(.6,-0.1,.33,1.19);

			.swiper-item {
				@include flex-teng(column, flex-start);
				width: 100vw;
				height: 100%;
			}
		}

		.BottomBar {
			
			:deep &.bodyView{
				transform: translate(-50%,0) !important;
				
			}
			&.hide {
				:deep &.bodyView{
					transform: translate(-50%,200%) !important;
				} 
			}
		}
		
		.BottomCart{
			
		}
	}

</style>